<template>
  <view class="body">
    <u-navbar title="课程通知" :auto-back="true" />
    <u-toast ref="uToast" />
    <u-loading-page :loading="loading" :iconSize="100" />
    <u-empty v-if="!notify.length" mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png" :marginTop="100" />
    <u-steps :current="999" direction="column" :dot="true">
      <u-steps-item v-for="(item, index) in notify" :key="index" :title="item.date" :desc="item.time">
        <view class="item" slot="content">
          {{ item.news }}
        </view>
      </u-steps-item>
    </u-steps>
  </view>
</template>

<script>
import { getNotify } from '@/api'
export default {
  components: {},
  data() {
    return {
      loading: true,
      notify: [],
    }
  },
  computed: {},
  methods: {
    // 课程通知
    async getNotify() {
      const { code, message, data } = await getNotify({ read: false });
      this.loading = false;
      if (code !== 1000) {
        return this.$refs.uToast.show({
          type: 'error',
          message: message
        });
      }
      this.notify = data;
    },
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {
    this.getNotify();
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
} 
</script>

<style lang="scss" scoped>
.body {
  padding: 0 20rpx;

  .item {
    margin: 10rpx;
    color: #666666;
    min-height: 220rpx;
    background-color: #f1f1f1;
    border-radius: 10rpx;
    padding: 30rpx 30rpx 30rpx 30rpx;
    position: relative;
    display: block;
    z-index: 0;
  }
}
</style>